<template>
  <div class="image__preview">
		<div class="itemBox"	
		
		>
	<el-image
		  ref="imageRef"
		  fit="contain"
			v-bind="$attrs"
			:initial-index="index"
			:src="baseURL+src"
			:style="{ height: height, width: width,
			background:'#000',borderRadius:'8px'
			 }"
			lazy
		/>
		<div class="model aic  fdc">
			<div class="aic jca h100 w100">
				<el-icon class="iconImg" @click="handleOreview"><ZoomIn /></el-icon>
			<el-icon v-if="remove" class="iconImg" @click="handleRemove"><Delete /></el-icon>
			</div>
		</div>
		</div>
	<el-image-viewer
        v-if="showPreview"
		 :initial-index="index"
        :url-list="ossDtoList"  teleported
        show-progress
        @close="showPreview = false"
      />
	</div>
</template>

<script setup lang="tsx">
import { ImageInstance } from 'element-plus';
import {ref,reactive,defineEmits, onMounted ,PropType, computed, watch} from 'vue';
const emit = defineEmits(["remove"]);
const showPreview = ref(false)
 const state = reactive({
 })
 const baseURL = import.meta.env.VITE_BASE_URL
const imageRef = ref<ImageInstance | null>(null);
const handleOreview = () =>{
	  imageRef.value!.showPreview()
	  showPreview.value = true
}

const handleRemove = () =>{
emit('remove')
}
 const props:any = defineProps({
		ossIds: {
			type: [Array, String],
		},
		src:{
			type: String as PropType<string>,
			default: ""
		},
		// 标题宽度
		width: {
			type: String as PropType<string>,
			default: "100px"
		},
		remove:{
			type: Boolean as PropType<boolean>,
			default: true
		},
		// 标题宽度
		height: {
			type: String as PropType<string>,
			default: "100px"
		},
		// 标题宽度
		index: {
			type: Number as PropType<number>,
			default: 0
		}
})
	const ossIdList = ref<any[]>([]);
		const ossDtoList = ref<any[]>([]);
		watch(
			() => props.src,
			() => {
				if(props.src){
						ossDtoList.value =  [baseURL+props.src];
						if( props.ossIds){
								ossDtoList.value =
								props.ossIds.map(res=>{
									return  baseURL+res
								})
								
						}

				}else{
					//  getByOssDtos();
				}
				
			},
			{
				immediate: true
			}
		);

			watch(
			() => props.src,
			() => {
				if(props.src){
						ossDtoList.value = [baseURL+props.src];
				}else{
					//  getByOssDtos();
				}
				
			},
			{
				immediate: true
			}
		);
		// async function getByOssDtos() {
		// 	if (props.ossIds instanceof Array) {
		// 		ossIdList.value = props.ossIds;
		// 	} else {
		// 		ossIdList.value = [props.ossIds];
		// 	}
		// 	const { data } = await getByOssIds(ossIdList.value);
		// 	if (data) {
		// 		ossDtoList.value = data;
		// 	}
		// }
		// getByOssDtos();
</script>

<style  scoped lang="scss" >
.image__preview {
	display: flex;
	flex-direction: row;
	align-items: self-start;
	.el-image {
		display: block;
	}
	.el-image:last-child {
		margin-right: 0;
	}
	.itemBox{
		position: relative;
		margin-right: 10px;
		border-radius: 8px;
		overflow: hidden;
	}
	.model{
		width: 100%;
		display: none;
		
		height: 100%;
		position: absolute;
	
		top: 0;
		 left: 0;
		 background: rgba($color: #000000, $alpha: 0.4);
	}
		.itemBox:hover .model{
			display: block;	
		}
		.iconImg{
			color: #fff;cursor: pointer;
			font-size:25px;
		}
}
</style>
